<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>品优购 - 全民手机节</title>
  </head>
  <body>
    <div style="margin-left: 200px">
      <img src="./images/logo.png" alt="" />
    </div>
    <div class="center">
      <!-- 中间区域+登录 -->
      <div class="slider">
        <img src="./images/bg.png" alt="全民手机节" style="width: 1480px;"/>
      </div>
      <!-- 登录框区域 -->
      <div class="login-box">
        <div class="login-method">
          <h3>扫描登录</h3>
          <h3>|</h3>
          <h3>账户登录</h3>
        </div>
        <p>公共场所有不建议自动登录，以免账号丢失。</p>
        <form id="loginForm">
          <!-- <input type="text" placeholder="邮箱/用户名/手机号" required /> -->
          <div class="input-container">
            <img src="./images/zh.png" class="input-icon" />
            <input
              type="text"
              placeholder="邮箱/用户名/手机号"
              class="input-field"
              required
            />
          </div>
          <div class="input-container">
            <img src="./images/pw.png" class="input-icon" />
            <input
              type="password"
              placeholder="请输入密码"
              class="input-field"
              required
            />
          </div>
          <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
            <div style="display: flex;align-items: center;">
                <input type="checkbox" id="autoLogin" name="autoLogin" checked />
                <label for="autoLogin" style="color: #a6a6a6;font-size: 12px;">自动登录</label>
            </div>
            <a href="/forgot-password" style="color: #000;">忘记密码？</a>
          </div>
          <button type="submit" id="loginButton">登录</button>
        </form>
        <div class="login_type">
            <ul>
                <li ><img src="./images/icon1.png" alt=""></li>
                <li ><img src="./images/icon2.png" alt=""></li>
                <li ><img src="./images/icon3.png" alt=""></li>
                <li ><img src="./images/icon4.png" alt=""></li>
            </ul>
        <a href="#">立即注册</a>
        </div>
      </div>
    </div>

    <!-- 底部信息栏 -->
    <div class="footer">
      <p>
        关于我们 | 联系我们 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 |
        销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
      </p>
      <p>
        地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
        电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
      </p>
      <p>京ICP备08001421号京公网安备110108007702</p>
    </div>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
        font-size: 12px;
      }
      .slider img {
        width: 100%;
        height: auto;
      }
      .center {
        position: relative;
      }
      /* 登录框样式 */
      .login-box {
        position: absolute;
        top: 30px;
        /* right: 20%; */
        left: 800px;
        width: 300px;
        padding: 0 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: white;
      }
      .login-method {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
      }
      .login-method h3 {
        font-weight: 400;
        color: #a6a6a6;
      }
      .login-method h3:last-child {
        color: red;
        text-align: end;
      }
      .login-box p {
        font-size: 12px;
        border: 1px solid #f6f3da;
        background-color: #fffeef;
        padding: 5px 3px 3px 5px;
        margin: 20px 0;
      }
      .input-container {
        position: relative;
        width: 85%;
      }
      .input-icon {
        position: absolute;
        height: 32px;
        left: 1px;
        top: 50%;
        transform: translateY(-66%);
        border-radius: 2px;
      }
      .input-field {
        padding-left: 40px;
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }

      button {
        width: 100%;
        padding: 5px 20px;
        cursor: pointer;
        border: none;
        color: white;
        background-color: #ba2c26;
      }
      .login_type{
        display: flex; 
        justify-content: space-between;
        align-items: center;
      }
      .login_type ul{
        display: flex;
        justify-content: space-between;
        padding: 0;
      }
      .login_type ul li{
        list-style: none;
        margin-right: 15px;
        width: 30px;
        height: 30px;
        padding: 0;
      }
      .footer{
        text-align: center;
        font-size: 12px;
        color: #a6a6a6;
      }
    </style>
 <script>
    // 获取登录按钮并添加点击事件监听器
    document.getElementById('loginButton').addEventListener('click', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为
        console.log(event); // 打印事件对象到控制台
        window.location.href = 'index.html'; // 跳转到同一目录下的 home.html 页面
    });
</script>
  </body>

</html>
